<template>
	<view class="details">
		<view class="top">
			<text>{{ props.data?.title }}</text>
			<view class="author">
				<text>{{ props.data?.author }}</text>
				<text style="margin-left: 30rpx">{{ props.data?.timer }}</text>
			</view>
		</view>
		<view class="content">
			<view class="article" v-if="props.data?.content">
				<view class="detail_picture">
					<image :src="props.data?.detailSrc" mode=""></image>
				</view>
				<text>{{ props.data?.content }}</text>
			</view>
			<view class="test" v-else>
				<view class="desc">
					<text>停水时间：5月8号（星期日）</text>
					<text>停水楼号 : 十一、十二栋</text>
				</view>
				<view class="bottom">
					<text>因管道老化，十一、十二栋口进行维修，停水一天，注意做好储水工作。</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const props = defineProps(['data']);
</script>

<style lang="scss">
.details {
	.top {
		width: 100%;
		height: 120rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		justify-content: space-around;
		.author {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #d5d6bd;
		}
	}
	.content {
		font-size: 28rpx;
		.article {
			.detail_picture {
				width: 100%;
				height: 300rpx;
				border-radius: 20rpx;
				margin:30rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					margin:30rpx 0;
				}
			}
		}
		.test {
			.desc {
				width: 100%;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				margin: 30rpx 0;
				text {
					margin: 10rpx 0;
				}
			}
		}
	}
}
</style>
